<template>
  <div style="width: 100vw;">
    <div class="CompanyHeader">
      <div class="logo">
        <img src="@/assets/Toplogo.png" alt="">
      </div>
      <!-- 右边退出和账号 -->
      <div class="right-corner" @click="goLogin">
        <svg t="1685439776820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3718" width="26" height="26">
          <path
            d="M416 757.333333h-170.666667c-12.8 0-21.333333-8.533333-21.333333-21.333333v-554.666667c0-12.8 8.533333-21.333333 21.333333-21.333333h170.666667c23.466667 0 42.666667-19.2 42.666667-42.666667s-19.2-42.666667-42.666667-42.666666h-170.666667c-59.733333 0-106.666667 46.933333-106.666666 106.666666v554.666667c0 59.733333 46.933333 106.666667 106.666666 106.666667h170.666667c23.466667 0 42.666667-19.2 42.666667-42.666667s-19.2-42.666667-42.666667-42.666667z"
            p-id="3719" fill="#e6e6e6"></path>
          <path
            d="M902.4 454.4L661.333333 234.666667c-12.8-10.666667-32-2.133333-32 12.8v149.333333H366.933333c-12.8 0-21.333333 14.933333-21.333333 32v64c0 17.066667 8.533333 32 21.333333 32h262.4v151.466667c0 14.933333 19.2 23.466667 29.866667 14.933333l241.066667-211.2c8.533333-8.533333 8.533333-19.2 2.133333-25.6z"
            p-id="3720" fill="#e6e6e6"></path>
        </svg>
      </div>
    </div>
    <span class="top">请选择您的单位登录</span>
    <div class="list">
      <div @click="companyOk(item)" class="el" v-for="item, i in companyList" :key="i">
        <img src="@/assets/company.png" alt="">
        <span>{{ item.unitName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companyList: [],
      userData: {}
    }
  },
  mounted() {
    this.userData = JSON.parse(sessionStorage.getItem("SelectCompanyUserData"))
    this.companyList = this.userData.postInfo.postInfoList
  },
  methods: {
    goLogin() {
      sessionStorage.clear();
      this.$router.push('/login')
    },
    companyOk(item) {
      console.log(item, this.userData, '所有信息');
      switch (item.serviceStatus) {
        case 0: //未开通服务
          alert('您的服务未开通，请联系管理员')
          return
        case 1: //已开通服务
          break
        case 2: //已到期服务
          alert('您的服务已到期，请联系管理员')
          return
        case 3: //已中断服务
          alert('您的服务已中断，请联系管理员')
          return
      }
      let params = {
        unitName: item.unitName,
        unitId: item.unitId,
        unitType: item.unitType,
        isSuperAdmin: item.isSuperAdmin,
        id: this.userData.id,
        name: this.userData.name,
        departmentId: this.userData.departmentId,
        departmentName: this.userData.departmentName,
        account: this.userData.account,
        token: this.userData.token,
        email: this.userData.email,
        mobile: this.userData.mobile,
        roleIds:this.userData.roleIds,
      }
      sessionStorage.setItem("logOnUser", JSON.stringify(params))
      this.$router.push('/initializationHome')
    }
  },
}
</script>

<style lang="less" scoped>
.CompanyHeader {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000000;

  .logo {
    position: absolute;
    left: 5px;
    top: 9px;
    width: 195px;
    height: 34px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .right-corner {
    float: right;
    height: 100%;
    line-height: 70px;
    margin-right: 10px;
  }
}

.top {
  width: 100%;
  display: block;
  margin: 100px 0 30px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
}

.list {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

  .el {
    border: 1px dashed #aaa;
    width: 200px;
    height: 200px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    img {
      width: 100px;
      height: 100px;
    }

    &:hover {
      background-color: #d7ecff;
    }
  }
}
</style>